<template>
  <view>
    <ugo-search></ugo-search>
    <u-tabs :list="tabs" @click="currentFn" :scrollable="false"></u-tabs>
    <view>
      <view v-if="currentIndex===0">
        <navigator
         :url="'/pages/goods_detail/goods_detail?goods_id='+item.goods_id" 
         class="goods-group"
         v-for="item in goodsList"
         :key="item.goods_id"
        >
          <view class="good-img">
            <image :src="item.goods_small_logo"></image>
          </view>
          <view class="good-info">
            <view class="goods-name u-line-2" >{{item.goods_name}}</view>
            <view class="goods-price">￥{{item.goods_price}}</view>
          </view>
        </navigator>
      </view>
      <view v-else-if="currentIndex===1">销量</view>
      <view v-else>价格</view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      // tabs栏数据
      tabs:[{name:"综合"},{name:"销量"},{name:"价格"}],
      // tabs选中索引
      currentIndex:0,
      // 商品列表数据
      goodsList:[],
      // 商品列表请求参数
      params:{
        query:"",
        cid:"",
        pagenum:0,
        pagesize:10
      },
      // 总条数
      total:0
    }
  },
  onLoad({cid}){
    console.log(cid)
    this.params.cid = cid
    this.getGoods()
  },
  // 小程序上拉触底函数
  onReachBottom(){
    // 判断还有没有下一页数据
    // 拿发送请求 回来的 数组的长度   和  接口返回值 total 总条数 做比较即可
    if(this.goodsList.length >= this.total){
      uni.showToast({
        title: '下一页没有数据了',
        icon: 'none'
      })
      return
    }
    // 页码加一重新发请求
    this.params.pagenum++
    this.getGoods()
  },
  // 下拉刷新
  async onPullDownRefresh(){
    // 重置旧数据
    this.params.pagenum = 1
    this.goodsList = []
    await this.getGoods()  // 等待数据回来，再关闭下拉刷新
    uni.stopPullDownRefresh()
  },
  methods: {
    // 发起请求获取商品列表数据
    async getGoods(){
      const res = await uni.$u.http.get('/goods/search', {params: this.params})
      console.log(res)
      // 新旧的数组合并
      this.goodsList = [...this.goodsList,...res.message.goods]
      // 保存总条数
      this.total = res.message.total
    },
    // tabs栏切换事件
    currentFn({index}){
      console.log(index)
      this.currentIndex = index
    }
  }
}
</script>

<style lang="scss">
.u-tabs__wrapper__nav__line{
  background-color: #eb4450 !important;
  // width: 80rpx !important;
}
.goods-group{
  display: flex;
  margin-top: 10rpx;
  margin-right: 20rpx;
  .good-img{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    image{
      width: 191rpx;
      height: 191rpx;
      background-color: #666;
    }
  }
  .good-info{
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .goods-name{
      font-size: 26rpx;
      color: #666;
    }
    .goods-price{
      font-size: 26rpx;
      color: #eb4450;
    }
  }
}
</style>